<template>
	<view class="page">
		<!-- <view class="page" v-if="detail"> -->
		<view class="base-info ">
			<view class="text-info flex">
				<view class="pic mar-right12">
					<image :src="'https://www.worldintek.com:39011/yaolexue-service/'+detail.imageDto.compressLink">
					</image>
				</view>
				<view class="text flex1">
					<view class="flex justify-between padd-bottom22  align-start">
						<view class="cr-333 font_s34 flex1">{{detail.title}}</view>
						<view class="subscribe-btn" v-if="detail.subscribeStatus===0" @click="handleClickSubscribe(1)">
							订阅</view>
						<view class="subscribe-btn" v-if="detail.subscribeStatus===1" @click="handleClickSubscribe(0)">
							取消订阅</view>
					</view>
					<view class="introduce">
						<t-readmore color="#000" labelColor="#FA312A" iSinfo line='2' :content="detail.description"></t-readmore>
					</view>
				</view>
			</view>
			<view class="flex justify-between mar-top41">
				<view class="ll-box flex align-center">
					<view class="font_s28 cr-333">
						播放
						<text class="mar-left35">{{detail.clickNumber}}</text>
					</view>
				</view>
				<view class="ll-box flex justify-between align-center">
					<view class="font_s28 cr-333">
						点赞
						<text class="mar-left35">{{detail.likeNumber}}</text>
					</view>
					<view>
						<!-- <image src="/static/img/icon_zan.png" class="w-26 h-26" v-if="detail.likeStatus===0"></image>
            <image src="/static/img/icon_zan_active.png" class="w-26 h-26" v-if="detail.likeStatus===1"></image> -->
					</view>
				</view>
			</view>
		</view>
		<view class="list-box padd-top30 padd-left35  padd-right30 padd-bottom40">
			<view class="label flex mar-bottom48 align-baseline ">
				<view class="num font_s38 mar-right7">{{detail.contentItemVideoDtos.length}}</view>
				<view class="font_s24 cr-999">条视频</view>
			</view>
			<view class="list">
				<view v-for="(item,index) in detail.contentItemVideoDtos"
					class="list-item flex justify-between align-start mar-bottom19" @click="handleDetail(item)">
					<view class="left flex align-start">
						<view class="pic mar-right25">
							<image
								:src="'https://www.worldintek.com:39011/yaolexue-service/'+item.imageDto.compressLink">
							</image>
						</view>
						<view class="cr-333 font_s24">{{item.title}}</view>
					</view>
					<view class="right" @click.stop="handleClickCollection(item)">
						<image src="https://www.worldintek.com:39011/yaolexue-service/icon_start.png"
							v-if="item.collectionStatus===0"></image>
						<image src="https://www.worldintek.com:39011/yaolexue-service/icon_start_active.png"
							v-if="item.collectionStatus===1"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 	<u-popup
	class="favorites-popup"
	  :show="showFavoritesPopup"
	  mode="bottom"
	  @close="handleUpdateContentCollectionStatus"
	  
	>
	  <view class="favorites-pop padd-top30 padd-left32 padd-right32">
	    <view class="flex justify-between mar-bottom31">
			<view class="font_s28 cr-333 font_w500 ">
				选择收藏夹
			</view>
			<view class="font_s24 cr-999" @click="handleShowCollctPopup(true)">
				<image src="/static/img/icon_add.png" mode="" class="w-21 h-21 mar-right10"></image>
				新建收藏夹
			</view>
		</view>
	    <view class="content ">
	      <view class=" mar-bottom19 item" v-for="item in favoritesList">
			 <radio-group  @change="radioChange">
			 			
						<label class="flex justify-between"  >
							
							<view>
								<view class="cr-333 font_s26 mar-bottom17">
									{{item.favoritesName}}
								</view>
								<view class="cr-999 font_s24">
									10个内容
								</view>
							</view>
							<view>
								<radio  :value="item.id" :checked="activeFavorites.id==item.id" />
							</view>
						</label>
					
			</radio-group>
	      </view>
	    </view>
	  </view>
	</u-popup> -->
		<t-favoritespop :show='showFavoritesPopup' :faChild='item'
			@close='()=>{handleShowFaPopup(false);(init())}'></t-favoritespop>
		<!-- 	<u-popup
	      :show="showCeateCollectPopup"
	      mode="center"
	      @close="handleShowCollctPopup(false)"
	      closeable
	    >
	      <view class="createcollect-pop padd-top30 padd-left32 padd-right32">
	        <view class="font_s28 cr-333 mar-bottom31">创建收藏夹</view>
	        <view class="content padd-bottom30">
	          <view class="flex mar-bottom19 ">
								<u-input type="text" v-model="favoritesName" placeholder="请输入收藏夹名称"></u-input>
	          </view>
						<u-button type="primary" text="确定" @click="handleAddUserFavorites"></u-button>
	        </view>
	      </view>
	    </u-popup> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				id: '',
				detail: null,
				collectionParams: {
					collectionStatus: null,
					contentItemId: null,
					userFavoritesId: null,
				},
				showFavoritesPopup: false,
				// showCeateCollectPopup: false,
				// favoritesList:[],
				// activeFavorites:null,
				// favoritesName:'',
				item: null
			}
		},
		onLoad(payload) {
			if (payload.id) {
				this.id = payload.id
				this.init()
			}
		},
		methods: {
			init() {
				this.getDetail()
			},
			async getDetail() {
				return this.$http.get(
					`/yaolexue-service-portal/contentItem/contentVideInfo/` + this.id, {}, {
						isNeedLoading: true
					}).then(res => {
					console.log(res)
					this.detail = res.data
				})
			},
			//获取收藏夹
			// getUserFavorites(){
			// 	return this.$http.get(
			// 		`/yaolexue-service-portal/userFavorites/findUserFavorites`, {}, {
			// 			isNeedLoading: true
			// 		}).then(res=>{
			// 			this.favoritesList=res.data
			// 			this.activeFavorites=res.data.find(item=>item.defaultStatus)||res.data[0]//后台还需要增加字段默认收藏夹选中和改变收藏夹选择

			// 		})

			// },
			//点击订阅
			handleClickSubscribe(status) {
				return this.$http.put(
					`/yaolexue-service-portal/contentItem/updateAlbumSubscribeStatus`, {
						albumId: this.detail.id,
						subscribeStatus: status
					}, {
						isNeedLoading: true
					}).then(res => {
					if (res.code === 200) {
						this.getDetail()
					}
				})
			},
			//点击收藏
			handleClickCollection(item) {
				this.item = item
				if (item.collectionStatus === 0) {
					this.handleShowFaPopup(true)
				} else {
					this.handleUpdateContentCollectionStatus()
				}
			},
			//添加收藏夹
			// handleAddUserFavorites(){

			// 	return this.$http.post(
			// 		`/yaolexue-service-portal/userFavorites/addUserFavorites`, {
			// 			favoritesName:this.favoritesName,
			// 		}, {
			// 			isNeedLoading: true
			// 		}).then(res=>{
			// 			if(res.code===200){
			// 				this.handleShowCollctPopup(false)
			// 				 this.getUserFavorites()
			// 			}
			// 		})
			// },

			//改变收藏状态
			handleUpdateContentCollectionStatus() {
				this.handleShowFaPopup(false)
				// this.handleShowCollctPopup(false)

				const collectionParams = {
					collectionStatus: 1 - this.item.collectionStatus,
					contentItemId: this.item.id,
				}
				// if(this.activeFavorites){
				// 	collectionParams.userFavoritesId=this.activeFavorites.id
				// }
				return this.$http.put(
					`/yaolexue-service-portal/contentItem/updateContentCollectionStatus`, collectionParams, {
						isNeedLoading: true
					}).then(res => {

					if (res.code === 200) {
						this.getDetail()
					}
				})
			},
			//显示收藏夹弹窗
			handleShowFaPopup(flag) {
				// if(flag)this.getUserFavorites()
				this.showFavoritesPopup = flag;
			},
			//显示新建收藏夹弹窗
			// handleShowCollctPopup(flag){
			// 	this.showCeateCollectPopup = flag;
			// },
			//选择收藏夹
			// radioChange(evt){

			// 	this.activeFavorites=this.favoritesList.find(item=>item.id===evt.detail.value)

			// },
			handleDetail(e) {
				uni.navigateTo({
					url: '/pages/VideoItemDetail/VideoItemDetail?id=' + e.id
				})
			}
		},
	};
</script>
<style lang="scss">
	.page {
		background-color: rgba(4, 0, 0, 0.09);
	}

	.base-info {
		padding: 30rpx 33rpx 72rpx;

		.text-info {
			.pic {
				width: 209rpx;
				height: 150rpx;
				flex: 0 0 209rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				.subscribe-btn {
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;
					background: #fa312a;
					border-radius: 10rpx;
					padding: 8rpx 30rpx;
				}

				.introduce {}
			}
		}

		.ll-box {
			width: 327rpx;
			height: 52rpx;
			background: #d7d7d7;
			padding: 0 20rpx;
		}
	}

	.list-box {
		background-color: #fff;

		.label {
			align-items: baseline;

			.num {
				color: #d3b941;
			}
		}

		.list {
			.left {
				.pic {
					width: 219.7rpx;
					height: 123rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.right {
				width: 27rpx;
				height: 27rpx;

				image {
					width: 100%;
					height: 100%
				}
			}
		}
	}


	.createcollect-pop {
		width: 400rpx;


	}
</style>